<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
      <a-button type="primary" icon="plus" @click="follow()">客户分组</a-button>
    </div>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam[0].keyword" placeholder="分组名称" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
              >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="Repossess">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      ref="table"
      :scroll="{ y: 530 }"
      :columns="columns"
      :rowKey="(row, index) => row.cCusCode"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :bordered="true"
      size="small"
    >
      <template slot="AllocationStatus" slot-scope="text, record">
        <a-tag v-if="record.AllocationStatus !== 1" color="red">待分配</a-tag>
        <a-tag v-else-if="record.AllocationStatus === 1" color="green">已分配</a-tag>
      </template>
      <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: CheckboxProps }" -->
      <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="hasPerm('CustomerInfo.Edit')" @click="follow(record)">编辑</a>
        </template>
      </span>
    </a-table>

    <EditForm ref="editForm" :parentObj="this"></EditForm>
  </a-card>
</template>

<script>
import EditForm from './EditForm.vue'
import moment from 'moment'
const columns = [
  { title: '客户编码', dataIndex: 'cCusCode', width: '90px' },
  { title: '客户名称', dataIndex: 'cCusName', align: 'left', width: '220px' },
  { title: '分组名称', dataIndex: 'GroupName', align: 'left', width: '160px' },
  { title: '客户来源', dataIndex: 'CustomerOrigin', align: 'left', width: '160px' },

  // { title: '开户银行', dataIndex: 'cCusBank', align: 'left', ellipsis: true, width: '200px' },
  { title: '地址', dataIndex: 'cCusAddress', ellipsis: true, width: '300px' },
  { title: '联系人', dataIndex: 'cCusPerson', width: '90px' },
  {
    title: '分配状态',
    dataIndex: 'AllocationStatus',
    align: 'center',
    scopedSlots: { customRender: 'AllocationStatus' },
    width: '90px'
  }

  // { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' }, width: '15%' }
]

export default {
  components: {
    EditForm
  },
  mounted() {
    this.getDataList()
    this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then(resJson => {
      if (resJson.Success) {
        this.DepartmentIdTreeData = resJson.Data
      }
    })
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      rules: {
        Type: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
        SalesmanId: [{ required: true, message: '请选择用户', trigger: 'change' }]
      },
      DepartmentId: '',
      DepartmentIdTreeData: [],
      show: false,
      IsFormal: true,
      data: [],
      list: [], //省级
      User: [],

      listChildren: [], //市
      county: [], //县
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      filters: {},
      entity: {},
      sorter: { field: 'cCusCode', order: 'desc' },

      queryParam: [{ Condition: 'GroupName' }],
      loading: false,
      modalLoading: false,
      columns,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    getDataList() {
      this.selectedRowKeys = []

      this.loading = true
      this.$http
        .post('/CustomerManagement/CustomerInfo/GetDataListByMoreConditionOfFormal', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          if (this.data) {
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          }
        })
    },
    follow() {
      this.$refs.editForm.openForm()
    },
    Department(e) {
      this.$set(this.entity, 'SalesmanId', '')
      this.UserList(e)
    },
    UserList(e) {
      this.$http.post('/Base_Manage/Base_User/GetDataListAsyncByDeptId?DeptId=' + e).then(resJson => {
        if (resJson.Success) {
          this.User = resJson.Data
        }
      })
    },
    PllAoo() {
      this.$refs.PllAOO.openForm()
    },
    handleAdd() {
      this.$refs.Detail.openForm(null, '添加')
    },
    handleRevise(id) {
      this.$refs.Detail.openForm(id, '编辑')
    },
    //省市区的模糊查询
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    Repossess() {
      this.queryParam = [{ Condition: 'GroupName' }]
      this.getDataList()
    },
    CheckboxProps(record) {
      return {
        props: {
          disabled: record.AllocationStatus === 1
        }
      }
    },

    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }

      this.getDataList()
    },
    Distribute(row) {
      this.IsFormal = true
      this.$refs.MyCustomer.openForm(row, '分配客户')
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },

    timeFormat(val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>
